<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button>取消事件</button>
  <div id="box">box</div>
  <script>
    var btn = document.querySelector('button')
    var oBox = document.querySelector('#box')

    // 绑定与解除绑定
    // oBox.onclick = function () {
    //   console.log('box')
    // }
    // // 点击按钮的时候把box的事件解除绑定
    // btn.onclick = function () {
    //   // 重新赋值为null，就可以把原来的函数覆盖，就没有事件了
    //   oBox.onclick = null
    // }

    // 监听与取消监听
    function fn () {
      console.log('box1')
    }
    oBox.addEventListener('click', fn)
    oBox.addEventListener('click', function () {
      console.log('box2')
    })
    btn.addEventListener('click', function () {
      // 移出监听的函数和添加监听必须是同一个函数（地址相同）
      oBox.removeEventListener('click', fn)
    })


  </script>
</body>
</html>